<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<%@ include file="/WEB-INF/base/include.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>report for ${ jmxName }</title>
<link rel="stylesheet" charset="utf-8"
	href="${ BOOTSTRAP }/bootstrap-3.3.5-dist/css/bootstrap.css"
	media="screen">

<link type="text/css"
	href="${ BOOTSTRAP_DATETIMEPICKER }/build/css/bootstrap-datetimepicker.min.css"
	rel="stylesheet">
<!-- ECharts单文件引入 -->
<script type="text/javascript" charset="utf-8"
	src="${ JS }/jquery-1.11.3.js"></script>
<script type="text/javascript" charset="utf-8"
	src="${ BOOTSTRAP }/bootstrap-3.3.5-dist/js/bootstrap.js"></script>

<script type="text/javascript" charset="utf-8"
	src="${ MOMENT }/moment.js"></script>

<script charset="utf-8" type="text/javascript"
	src="${BOOTSTRAP_DATETIMEPICKER }/build/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" charset="utf-8"
	src="${ ECHAR }/www2/js/echarts-all.js"></script>

<script type="text/javascript" charset="utf-8"
	src="${JS }/loadingUtils.js"></script>

<script type="text/javascript" charset="utf-8"
	src="${JS }/performancejs.js"></script>
<script type="text/javascript" charset="utf-8"
	src="${JS }/performancejs_page.js"></script>


<script type="text/javascript">
	$(function() {  
		$('#datetimStart').datetimepicker({
			format : "YYYY/MM/DD HH:mm",
			showTodayButton : true,
			defaultDate : moment("${ datetimeStart }", "YYYY/MM/DD HH:mm"),
			showClear : true,
			showClose : true
		});

		var ssss = $("#datetimEnd").length ;// if the element with datetimEnd is exist
		//alert(ssss);
		if($("#datetimEnd").length > 0){
			$('#datetimEnd').datetimepicker({
				useCurrent : true, //Important! See issue #1075
				format : "YYYY/MM/DD HH:mm",
				defaultDate : moment("${now}", "YYYY/MM/DD HH:mm"),
				showTodayButton : true,
				showClear : true,
				showClose : true
			});
			 
			$("#datetimStart").on("dp.change", function(e) {
				$('#datetimEnd').data("DateTimePicker").minDate(e.date);
			});
			$("#datetimEnd").on("dp.change", function(e) {
				$('#datetimStart').data("DateTimePicker").maxDate(e.date);
			});
		}
	})
</script>
</head>
<body>
	<div>
		<div id="loadingIcon"
			style="position: absolute; width: 100%; height: 100%; background-color: gray; opacity: 0.5; display: none; z-index: 99">
			<img alt="loading..." title="loading..."
				src="${IMAGES }/loading1.gif"
				style="padding-left: 48%; padding-top: 22%">
		</div>
		<br />
		<div style="width: 75%; margin: 0 auto;">
			<div class='col-md-11'>
				<input id="jmxUrl" value="${ jmxUrl }"
					style="width: 200px; visibility: hidden;"> <br>
				<input id="queueIP" value="${ QUEUEIP }" style="visibility: hidden;"> <br> 
				<input type="text" value="<c:url value='/hpe/performance'/>" id="ajaxUrl"
					style="width: 200px; visibility: hidden;"> <br>

				<h1>The report of ${ jmxName }</h1>
				<h3>Select the date or date range and click the start button to
					show the report.</h3>

				<!--  String dateStart, String dateEnd -->
				<div class='col-md-3'>
					<div class="form-group">
						<div class='input-group date' id='datetimStart'>
							<input title="select the start time" id='datetimStartInput'
								type='text' title="select the start time" name="dateStart"
								class="form-control" /> <span class="input-group-addon">
								<span class="glyphicon glyphicon-calendar"></span>
							</span>
						</div>
					</div>
				</div>

				<c:if test="${!empty mode}">

					<div class='col-md-1'>==>></div>
					<div class='col-md-3'>
						<div class="form-group">
							<div class='input-group date' id='datetimEnd'>
								<input type='text' class="form-control" id='datetimEndInput'
									title="select the end time" name="dateEnd" /> <span
									class="input-group-addon"> <span
									class="glyphicon glyphicon-calendar"></span>
								</span>
							</div>
						</div>
					</div>

					<div class='col-md-3'>
						<input type="button" value="export excel" id="reportExport"
							title="click to download a excel timerange report"
							class="btn btn-primary" /> 
							<input id="showReport" type="button"
							value="show" title="click to show the timerange report"
							class="btn btn-info">
					</div>
				</c:if>
				<c:if test="${empty mode}">
					<div class='col-md-3'>
						<input id="startReport" type="button" value="start"
							class="btn btn-success" title="click to start the report">
					</div>
				</c:if>
			</div>
		</div>
			<div class="col-md-12">
				<div id="cover">
					<div id="summaryLineChart" style="height: 500px"></div>
					<br/>
					<br/>
					<div id="heapChart" style="height: 500px"></div>
					<br/>
					<br/>
					<div id="queueLineChart" style="height: 500px"></div>
					<br/>
					<br/>
					<div id="panelChart" style="height: 400px"></div>
				</div>
			</div>
	</div>
</body>
</html>